import React, { Component } from 'react'
import {NavBar,Button,InputItem,Toast} from 'antd-mobile';
import './index.less';
import qq from './images/qq.png';
import github from './images/github.png';
import wechat from './images/wechat.png';
import axios from 'axios';
import {phoneReg, codeReg} from '../../config/reg';
import config from '../../config/index';

export default class Login extends Component {
    //声明 state
    state = {
        phone: '', //手机号
        code: '',  //验证码
        time: config.DDSJ, //倒计时 验证码等待时间
        isSending: false //检测是否正在发送验证码
    }

    //保存表单数据
    saveData = (type) => {
        return (value) => {
            this.setState({
                [type]: value
            })
        }
    }

    //发送验证码
    sendCode = async () => {
        //获取手机号
        let {phone, time} = this.state;
        //检测手机号格式是否正确
        if(!phoneReg.test(phone)){
            //错误提示
            Toast.fail('手机号格式错误', 1);
            return;
        }
        
        //设置 isSengding 为true
        this.setState({
            isSending: true
        });

        //启动定时器
        this.timer = setInterval(() => {
            time--;
            //修改 time 的值
            this.setState({
                time: time
            });
            //当定时器结束时, 修改状态
            if(time === 0){
                //停止定时器
                clearInterval(this.timer);
                //修改状态
                this.setState({
                    isSending: false,
                    //
                    time: config.DDSJ
                })
            }
        }, 1000);

        try{
            //发送AJAX 请求
            let result = await axios.post('/login/digits', {phone});

            if(result.data.code === 20000){
                //成功
                Toast.success(result.data.message, 1);
            }else{
                //失败
                Toast.fail(result.data.message, 1);
            }
        }catch(e){
            Toast.fail('网路异常, 请稍后再试~~~');
        }
    }

    //登录功能
    login = async () => {
        //获取手机号和验证码
        let {phone, code} = this.state;
        //检测
        if(!phoneReg.test(phone)){
            return Toast.fail('手机号格式错误', 1);
        }

        if(!codeReg.test(code)){
            return Toast.fail('验证码格式错误', 1);
        }

        //发送AJAX请求
        let result = await axios.post('/login/phone', {phone, code});
        //判断
        if(result.data.code === 20000){
            //Toast 第三个参数是一个结束时的回调
            Toast.success(result.data.message, 1, () => {
                //进行页面跳转  goBack goForward  go  push
                this.props.history.push('/usercenter');
            });
        }else{
            Toast.fail(result.data.message, 2)
        }


    }

    //检测参数是否合法
    check = () => {
        //获取手机号和验证码
        let {phone, code} = this.state;
        //检测
        if(!phoneReg.test(phone)){
            return false;
        }

        if(!codeReg.test(code)){
            return false;
        }

        return true;
    }

    //跳转至 Github 登录
    jumbGitHub = () => {
        //页面重定向到 github 的授权页面
        window.location.href = 'https://github.com/login/oauth/authorize?client_id=db4b538fb7a304263541'
    }

    render() {
        return (
            <div className="login-page">
                {/* 顶部导航 start */}
                <NavBar mode="light" >手机验证码登录</NavBar>
                {/* 顶部导航 end */}
            
                <div className="gap-20"></div>

                {/* 登录整体内容区 start */}
                <div className="login-content">
                    {/* 表单部分 start */}
                    <div className="login-form">
                        {/* 手机号 */}
                        <div className="form-phone">
                            <InputItem placeholder="输入您的手机号" onChange={this.saveData('phone')} />
                        </div>
                        {/* 验证码 */}
                        <div className="form-code">
                            <InputItem placeholder="输入6位验证码"  onChange={this.saveData('code')} />
                            <Button size="small" onClick={this.sendCode} disabled={this.state.isSending}>获取验证码 {this.state.isSending ? this.state.time : ''}</Button>
                        </div>
                        <div className="gap-20"></div>
                        <div className="gap-10"></div>
                        <Button type="primary" onClick={this.login} disabled={!this.check()}>登录</Button>
                    </div>
                    {/* 表单部分 end */}

                    <div className="gap-50"></div>
                    {/* 其他登录 start */}
                    <div className="other-login">
                        <div className="text">
                            <span>其他登录方式</span>
                        </div>
                        <div className="gap-20"></div>
                        <div className="gap-10"></div>
                        <div className="other-img">
                            <img src={github} alt="" onClick={this.jumbGitHub} />
                            <img src={qq} alt="" />
                            <img src={wechat} alt="" />
                        </div>
                    </div>
                    {/* 其他登录 end */}

                    <div className="gap-50"></div>

                    {/* 文本提示 start */}
                    <p className="notice">
                        未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意 <a href="http://www.atguigu.com">《硅谷隐私政策》</a>
                    </p>
                    {/* 文本提示 end */}
                </div>
                {/* 登录整体内容区 end */}
            </div>
        )
    }

    componentWillUnmount(){
        //清理定时器
        clearInterval(this.timer);
    }
}
